<template>
  <q-page class="q-py-md bg-grey-3" style="padding-bottom: 90px">
    <div class="bg-white q-ma-sm q-pa-sm radius sticky-parent">
      <div class="text-center" style="font-size: 1.2em;">{{ data && data.tenant_company }}</div>
      <q-separator class="q-my-sm" inset />
      <div class="text-center" style="font-size: 1.5em;">{{ pageTitle }}</div>
    </div>

    <div v-if="data">
      <!-- text类型区域 -->
      <div class="bg-white q-mx-sm q-my-md q-pa-sm radius">
        <q-list dense class="fit q-my-md" v-if="renderFlag">
          <q-item v-for="item in textFields" :key="item.name" class="q-mb-sm">
            <div class="q-item__section column q-item__section--main justify-start col-4">
              <q-item-label class="text-grey-7">{{ item.label }}</q-item-label>
            </div>
            <div class="q-item__section column q-item__section--main justify-start col-8">
              <q-item-label v-if="item.type === 'text'" class="text-right" :class="item.classes">{{ item.prefix || '' }} {{ item.value || ''}} {{ item.suffix || '' }}</q-item-label>
            </div>
          </q-item>
        </q-list>
      </div>

      <!-- table类型区域 -->
      <div v-if="renderFlag">
        <div class="bg-white q-mx-sm q-mb-md q-pa-sm radius" v-for="(table, idx) in tableFields" :key="idx">
          <div class="text-grey-7 q-px-md q-py-sm">{{ table.label }}</div>
          <q-separator class="q-mb-sm" />
          <q-list dense class="fit q-py-sm" v-for="(row, rowIdx) in table.value" :key="rowIdx">
            <q-item v-for="(col, colIdx) in table.columns" :key="col.name" class="q-mb-sm">
              <div class="q-item__section column q-item__section--main justify-start col-4">
                <q-item-label class="text-grey-7"><q-badge v-if="colIdx === 0" color="blue" :label="rowIdx + 1" />{{ col.label }}</q-item-label>
              </div>
              <div class="q-item__section column q-item__section--main justify-start col-8">
                <div v-if="col.isImage">
                  <viewer :images="row[col.field]" class="flex justify-end">
                    <template #default="scope">
                      <div class="image-box-xs" v-for="img in scope.images" :key="img.thumb">
                        <img class="fit-thumb" :src="img.image" :data-src="img.image" />
                      </div>
                    </template>
                  </viewer>
                </div>
                <q-item-label class="text-right" v-else>{{ typeof col.format === 'function' ? col.format(row[col.field], row) : row[col.field] }}</q-item-label>
              </div>
            </q-item>
            <q-separator inset />
          </q-list>
        </div>
      </div>
    </div>

    <div class="bg-white q-mx-sm q-my-md q-pa-sm radius column flex-center" style="height: 260px;" v-else>
      <img src="/images/sad.svg" style="width:100px;" />
      <div class="text-h6 q-mt-lg">不存在的配送单，请与我司联系！</div>
    </div>

    <!-- 联系方式 -->
    <div class="bg-white q-mx-sm q-mb-md q-pa-sm radius">
      <q-list dense class="fit q-my-md">
        <q-item>
          <q-item-section class="col-3">
            <q-item-label class="text-grey-7">公司地址</q-item-label>
          </q-item-section>
          <q-item-section class="col-9">
            <q-item-label class="text-right">{{ data && data.tenant_address }}</q-item-label>
          </q-item-section>
        </q-item>

        <q-item>
          <q-item-section class="col-3">
            <q-item-label class="text-grey-7">联系电话</q-item-label>
          </q-item-section>
          <q-item-section class="col-9">
            <q-item-label class="text-right">{{ data && data.tenant_tel }}</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </div>

    <div class="bg-white q-ma-sm q-pa-sm radius flex justify-between text-grey-7" v-if="data">
      <div>创建时间：{{data && data.create_date}}</div>
      <div>浏览次数：{{data && data.reading_times}}</div>
    </div>
  </q-page>
</template>

<script>
import { defineComponent } from 'vue';
import { mapState, mapActions } from 'pinia';
import { useStore } from 'stores/store';
import { useMeta } from 'quasar';

export default defineComponent({
  name: 'deliveryShare',
  setup (props, context) {
    const $store = useStore();
    const pageTitle = '配送单';

    useMeta({
      // 设置文件标题
      title: `${pageTitle} - ${$store.siteConfig.appName} - 木多鱼系列`
    });

    return {
      pageTitle
    }
  },
  data () {
    return {
      id: '',
      data: {
        reading_times: 0,
        create_date: '',
        tenant_company: '',
        tenant_address: '',
        tenant_tel: ''
      },
      renderFlag: false,
      formFields: {
        bill_no: { type: 'text', label: '配送单号', value: '' },
        logistics: { type: 'text', label: '物流公司', value: '' },
        logistics_no: { type: 'text', label: '物流单号', value: '' },
        consignee: { type: 'text', label: '联系人', value: '' },
        tel: { type: 'text', label: '联系电话', value: '' },
        address: { type: 'text', label: '地址', value: '' },
        remark: { type: 'text', label: '备注', value: '' },

        t_delivery_details: {
          type: 'table',
          label: '配送明细',
          value: [],
          columns: [
            { name: 'material_image', label: '图片', field: 'material_image', isImage: true, align: 'center' },
            { name: 'material_name_model', label: '配送货物', field: 'material_name_model', align: 'center' },
            { name: 'deliver_amount', label: '配送数量', field: 'deliver_amount', align: 'center', format: (val, row) => `${Number(val)} ${row.material_unit || ''}` },
            { name: 'remark', label: '备注', field: 'remark', align: 'center' }
          ]
        }
      }
    }
  },
  mounted () {
    this.id = this.$route.params.id;
    this.refresh();
  },
  methods: {
    refresh () {
      this.renderFlag = false;
      this.$axios.post('/c/share/deliveryDetail', { id: this.id }).then(({ data }) => {
        this.data = data;
        if (data) {
          for (const key in data) {
            if (this.formFields[key]) {
              this.formFields[key].value = !data[key] ? '' : data[key];
            }
          }

          if (typeof this.formFields.t_delivery_details.value === 'string' && this.formFields.t_delivery_details.value) {
            this.formFields.t_delivery_details.value = JSON.parse(this.formFields.t_delivery_details.value);
          }
        }

        this.renderFlag = true;
      });
    }
  },
  computed: {
    ...mapState(useStore, ['defaultImg', 'siteInfo']),
    textFields () {
      const fieldsArr = [];
      for (const [field, obj] of Object.entries(this.formFields)) {
        if (obj.type === 'text' && obj.visible !== false) {
          obj.name = field;
          fieldsArr.push(obj);
        }
      }
      return fieldsArr;
    },
    tableFields () {
      const fieldsArr = [];
      for (const [field, obj] of Object.entries(this.formFields)) {
        if (obj.type === 'table') {
          obj.name = field;
          fieldsArr.push(obj);
        }
      }
      return fieldsArr;
    }
  }
});
</script>

<style lang="scss">
.radius {
  border-radius: 10px;
}

.sticky-parent {
  position: relative;
}

.sticky {
  position: absolute;
  top: 20px;
  right: 20px;
}

.seal-effect {
  border-radius: 50%;
  width: 90px;
  height: 60px;
  border: 4px solid $primary;

  .sign-title {
    font-size: 18px;
    color: $primary;
    font-weight: bold;
  }
}

.seal-invalid {
  border-radius: 50%;
  width: 90px;
  height: 60px;
  border: 4px solid $grey;

  .sign-title {
    font-size: 18px;
    color: $grey;
    font-weight: bold;
  }
}
</style>
